FLPATH-4285 | [DCM] Server-side pagination not implemented - #4155

• Enable server-side cursor pagination for all six DCM tabs.
• Standardize pagination params/query building across dcm-common API clients.
• Add cursor navigation test coverage (Next/Previous, retry, token passing).

graph TD
  UI["DCM tab pages"] --> H1["useCrudTab (cursor mode)"] --> API1["dcm-common API clients"] --> BE["DCM backend list APIs"]
  UI --> H2["usePaginatedFetch"] --> API1
  API1 --> U1["buildPaginationQuery"]
  UI --> C1["CursorPaginationControls"]
  UI --> L1["DcmCrudTabLayout / DcmSearchTableCard"] --> C1

Loading

The following are alternative approaches to this PR:

1. Centralize cursor token-stack in useCrudTab

• ➕ Eliminates duplicated cursor state/handlers across Providers/Policies/Catalog tabs
• ➕ Reduces risk of subtle divergence (e.g., search reset semantics, disabled states)
• ➖ Bigger behavioral surface area change in a core hook used by multiple tabs
• ➖ Harder to keep hook API simple (needs pageSize, resetCursor, maybe total-count semantics)

2. Use usePaginatedFetch for all tabs (including CRUD tabs)

• ➕ One pagination implementation and test suite for all list views
• ➕ Simplifies tab components to mapping API response → {items,nextPageToken}
• ➖ Requires additional plumbing to integrate CRUD-specific refresh/reload semantics and side loads (dropdown data)
• ➖ May force more refactoring than warranted for this PR

Recommendation: The PR’s mixed approach is reasonable for incremental adoption (usePaginatedFetch for read-only tabs; manual token-stack around useCrudTab for CRUD tabs). Consider a follow-up to consolidate cursor navigation logic (either enhancing useCrudTab or adopting usePaginatedFetch more broadly) to reduce duplicated token-stack code in multiple tab components.

Enhancement (16) +558 / -114

CatalogApi.tsAdd PaginationParams to CatalogApi list methods +6/-3

Add PaginationParams to CatalogApi list methods

• Updates CatalogApi interface signatures to accept optional PaginationParams for service types, catalog items, and instances.

workspaces/dcm/plugins/dcm-common/src/clients/CatalogApi.ts

CatalogClient.tsAdd cursor pagination query building to CatalogClient lists +20/-6

Add cursor pagination query building to CatalogClient lists

• Extends listServiceTypes/listCatalogItems/listCatalogItemInstances to accept PaginationParams and append a shared query string via buildPaginationQuery.

workspaces/dcm/plugins/dcm-common/src/clients/CatalogClient.ts

PolicyManagerApi.tsAdd PaginationParams to PolicyManagerApi.listPolicies +2/-1

Add PaginationParams to PolicyManagerApi.listPolicies

• Changes PolicyManagerApi.listPolicies to accept optional PaginationParams, enabling cursor pagination from callers.

workspaces/dcm/plugins/dcm-common/src/clients/PolicyManagerApi.ts

PolicyManagerClient.tsImplement paginated listPolicies in PolicyManagerClient +4/-2

Implement paginated listPolicies in PolicyManagerClient

• Implements listPolicies(params) and appends cursor query parameters using buildPaginationQuery.

workspaces/dcm/plugins/dcm-common/src/clients/PolicyManagerClient.ts

ProvidersApi.tsAdd PaginationParams to ProvidersApi.listProviders +2/-1

Add PaginationParams to ProvidersApi.listProviders

• Changes ProvidersApi.listProviders to accept optional PaginationParams, enabling cursor pagination from callers.

workspaces/dcm/plugins/dcm-common/src/clients/ProvidersApi.ts

ProvidersClient.tsImplement paginated listProviders in ProvidersClient +4/-2

Implement paginated listProviders in ProvidersClient

• Implements listProviders(params) and appends cursor query parameters using buildPaginationQuery.

workspaces/dcm/plugins/dcm-common/src/clients/ProvidersClient.ts

index.tsExport buildPaginationQuery from dcm-common +1/-0

Export buildPaginationQuery from dcm-common

• Re-exports buildPaginationQuery so all consumers can share consistent pagination URL construction.

workspaces/dcm/plugins/dcm-common/src/index.ts

common.tsAdd shared PaginationParams type +13/-0

Add shared PaginationParams type

• Introduces PaginationParams (max_page_size, page_token) as a shared type for cursor-pagination list endpoints.

workspaces/dcm/plugins/dcm-common/src/types/common.ts

buildPaginationQuery.tsAdd shared buildPaginationQuery utility +32/-0

Add shared buildPaginationQuery utility

• Adds a utility to build query strings for max_page_size and page_token, returning an empty string when unset.

workspaces/dcm/plugins/dcm-common/src/utils/buildPaginationQuery.ts

CursorPaginationControls.tsxAdd reusable Previous/Next controls for cursor pagination +80/-0

Add reusable Previous/Next controls for cursor pagination

• Introduces a small UI component that renders Previous/Next buttons and handles disabled/loading states for cursor-based pagination.

workspaces/dcm/plugins/dcm/src/components/CursorPaginationControls.tsx

DcmCrudTabLayout.tsxSupport cursor pagination mode in CRUD tab layout +68/-29

Support cursor pagination mode in CRUD tab layout

• Makes client-side Table paging optional and adds a cursorPagination prop to render CursorPaginationControls under the table when server-side paging is used.

workspaces/dcm/plugins/dcm/src/components/DcmCrudTabLayout.tsx

dcmTabListHelpers.tsxAdd cursor pagination option to DcmSearchTableCard +67/-26

Add cursor pagination option to DcmSearchTableCard

• Adds an optional cursorPagination prop to disable the Table pager and render CursorPaginationControls for read-only list cards.

workspaces/dcm/plugins/dcm/src/components/dcmTabListHelpers.tsx

useCrudTab.tsExtend useCrudTab to support server-side paged load results +28/-3

Extend useCrudTab to support server-side paged load results

• Allows loadFn to return either a plain array (client-side paging) or a PagedLoadResult with nextPageToken; exposes nextPageToken in the hook result and clears it on errors.

workspaces/dcm/plugins/dcm/src/hooks/useCrudTab.ts

usePaginatedFetch.tsIntroduce generic usePaginatedFetch cursor pagination hook +183/-0

Introduce generic usePaginatedFetch cursor pagination hook

• Adds a reusable cursor pagination hook with a token stack for Previous navigation, plus reset/refresh helpers and robust error handling.

workspaces/dcm/plugins/dcm/src/hooks/usePaginatedFetch.ts

ServiceTypesTabContent.tsxConvert Service Types tab to usePaginatedFetch cursor pagination +46/-41

Convert Service Types tab to usePaginatedFetch cursor pagination

• Replaces prior load/page slicing logic with usePaginatedFetch, resets cursor on search, updates retry behavior, and renders cursor controls under the table.

workspaces/dcm/plugins/dcm/src/pages/service-types/ServiceTypesTabContent.tsx

ref.tsAdd translations for cursor pagination buttons +2/-0

Add translations for cursor pagination buttons

• Adds i18n strings for Previous/Next pagination controls used by CursorPaginationControls.

workspaces/dcm/plugins/dcm/src/translations/ref.ts

Bug fix (6) +326 / -87

catalog.tsMake next_page_token optional in catalog list types +3/-3

Make next_page_token optional in catalog list types

• Aligns ServiceTypeList/CatalogItemList/CatalogItemInstanceList with backend behavior where next_page_token may be absent on single-page results.

workspaces/dcm/plugins/dcm-common/src/types/catalog.ts

CatalogItemInstancesTabContent.tsxAdd cursor pagination to Catalog Item Instances tab +67/-12

Add cursor pagination to Catalog Item Instances tab

• Switches instance listing to server-side cursor pagination using useCrudTab PagedLoadResult, persists page size, caps catalog-item dropdown fetch to 25, and renders cursor controls via DcmCrudTabLayout.

workspaces/dcm/plugins/dcm/src/pages/catalog-item-instances/CatalogItemInstancesTabContent.tsx

CatalogItemsTabContent.tsxAdd cursor pagination to Catalog Items tab +68/-10

Add cursor pagination to Catalog Items tab

• Switches item listing to server-side cursor pagination, persists page size, caps service-type dropdown fetch to 25, and wires Next/Previous controls into DcmCrudTabLayout.

workspaces/dcm/plugins/dcm/src/pages/catalog-items/CatalogItemsTabContent.tsx

PoliciesTabContent.tsxAdd cursor pagination to Policies tab +72/-10

Add cursor pagination to Policies tab

• Updates listPolicies calls to pass {page_token,max_page_size}, stores cursor state (current token + stack), resets cursor on search changes, and renders cursor controls in the CRUD layout.

workspaces/dcm/plugins/dcm/src/pages/policies/PoliciesTabContent.tsx

ProvidersTabContent.tsxAdd cursor pagination to Providers tab +70/-14

Add cursor pagination to Providers tab

• Updates listProviders calls to pass {page_token,max_page_size}, caps service-type dropdown to 25, manages cursor token stack for Next/Previous, and renders cursor controls in the CRUD layout.

workspaces/dcm/plugins/dcm/src/pages/providers/ProvidersTabContent.tsx

ResourcesTabContent.tsxConvert Resources tab to usePaginatedFetch cursor pagination +46/-38

Convert Resources tab to usePaginatedFetch cursor pagination

• Replaces single-shot loading/client-side slicing with usePaginatedFetch, resets cursor on search, adjusts empty/error/loading rendering, and enables cursor controls in DcmSearchTableCard.

workspaces/dcm/plugins/dcm/src/pages/resources/ResourcesTabContent.tsx

Tests (5) +836 / -1

useCrudTab.test.tsAdd tests for paged load results in useCrudTab +45/-0

Add tests for paged load results in useCrudTab

• Extends hook tests to validate PagedLoadResult handling, nextPageToken extraction/defaulting, and token reset on failure.

workspaces/dcm/plugins/dcm/src/hooks/useCrudTab.test.ts

usePaginatedFetch.test.tsAdd unit tests for generic cursor pagination hook +210/-0

Add unit tests for generic cursor pagination hook

• Adds test coverage for initial load, next/prev navigation, refresh behavior, error handling, and cursor resets.

workspaces/dcm/plugins/dcm/src/hooks/usePaginatedFetch.test.ts

PoliciesTabContent.test.tsxAdd cursor pagination tests for Policies tab +81/-1

Add cursor pagination tests for Policies tab

• Updates mocks and adds tests asserting pagination params on mount, Next/Previous button state, and page_token propagation after navigation.

workspaces/dcm/plugins/dcm/src/pages/policies/PoliciesTabContent.test.tsx

ProvidersTabContent.test.tsxAdd cursor pagination tests for Providers tab +269/-0

Add cursor pagination tests for Providers tab

• Adds a full test suite covering pagination params, dropdown max_page_size=25, load/error states, and Next/Previous navigation/token passing.

workspaces/dcm/plugins/dcm/src/pages/providers/ProvidersTabContent.test.tsx

ResourcesTabContent.test.tsxAdd cursor pagination tests for Resources tab +231/-0

Add cursor pagination tests for Resources tab

• Adds tests verifying pagination params on mount, retry behavior, and Next/Previous navigation states and page_token propagation.

workspaces/dcm/plugins/dcm/src/pages/resources/ResourcesTabContent.test.tsx

Other (7) +102 / -13

server-side-pagination-all-tabs.mdChangeset documenting server-side pagination rollout +28/-0

Changeset documenting server-side pagination rollout

• Adds a changeset describing the cursor-pagination expansion to all six tabs, API interface updates, dropdown page-size caps, and new/updated tests.

workspaces/dcm/.changeset/server-side-pagination-all-tabs.md

knip-report.mdAdd knip unused-deps report (app) +17/-0

Add knip unused-deps report (app)

• Introduces a Knip report artifact listing unused dependencies and devDependencies for the DCM app workspace.

workspaces/dcm/packages/app/knip-report.md

knip-report.mdAdd knip unused-deps report (backend) +15/-0

Add knip unused-deps report (backend)

• Introduces a Knip report artifact listing unused dependencies/devDependencies for the DCM backend workspace.

workspaces/dcm/packages/backend/knip-report.md

knip-report.mdAdd knip report placeholder (dcm-backend) +1/-0

Add knip report placeholder (dcm-backend)

• Adds a minimal Knip report file for the dcm-backend plugin workspace.

workspaces/dcm/plugins/dcm-backend/knip-report.md

knip-report.mdAdd knip report placeholder (dcm-common) +1/-0

Add knip report placeholder (dcm-common)

• Adds a minimal Knip report file for the dcm-common plugin workspace.

workspaces/dcm/plugins/dcm-common/knip-report.md

report.api.mdPublish pagination APIs in the generated API report +26/-13

Publish pagination APIs in the generated API report

• Updates the public API report to include PaginationParams, buildPaginationQuery, and pagination-capable list methods; also makes next_page_token optional in list types.

workspaces/dcm/plugins/dcm-common/report.api.md

knip-report.mdAdd knip unused-deps report (dcm frontend plugin) +14/-0

Add knip unused-deps report (dcm frontend plugin)

• Introduces a Knip report artifact listing unused dependencies/devDependencies for the dcm frontend plugin workspace.

workspaces/dcm/plugins/dcm/knip-report.md

@@            Coverage Diff             @@
##             main    #4155      +/-   ##
==========================================
+ Coverage   58.06%   58.19%   +0.13%     
==========================================
  Files        2411     2415       +4     
  Lines       96367    96541     +174     
  Branches    26856    26895      +39     
==========================================
+ Hits        55953    56181     +228     
+ Misses      40215    40130      -85     
- Partials      199      230      +31     

*This pull request uses carry forward flags. Click here to find out more.

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8c14679...5fad948. Read the comment docs.

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Description

usePaginatedFetch.resetCursor (and related search handlers in cursor‑paginated CRUD tabs) clears
the current cursor/nextToken without triggering a reload, and several tabs call this on every
search change. This can leave later-page data on screen while pagination state is reset
(Next/Previous disabled or navigation jumping incorrectly), and the cursor for the currently
displayed page is lost.

Code

workspaces/dcm/plugins/dcm/src/hooks/usePaginatedFetch.ts[R165-168]

+    currentTokenRef.current = undefined;
+    tokenStackRef.current = [];
+    setTokenStack([]);
+    setNextToken('');

Relevance

●●● Strong

Correctness issue in new pagination flow; team has accepted similar hook-state hardening fixes
before.

PR-#3342
PR-#2950

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The cited logic for resetCursor explicitly clears currentTokenRef and nextToken without
fetching new data, and the Service Types and Resources tabs invoke it on each search change, so the
pagination state is effectively reset to “page 1 with no next page” while the data remains
whatever page was previously loaded. In the CRUD tabs, handleSearchChange similarly clears
currentTokenRef without a reload; later, goNext pushes currentTokenRef.current ?? '' onto the
token stack and goPrev uses that stack token to restore the previous page token, so after
searching on page > 1 the pushed value becomes '' and goPrev can navigate back to the first page
token (undefined) instead of returning to the page that was displayed when the search was applied.

workspaces/dcm/plugins/dcm/src/hooks/usePaginatedFetch.ts[156-169]
workspaces/dcm/plugins/dcm/src/pages/service-types/ServiceTypesTabContent.tsx[64-70]
workspaces/dcm/plugins/dcm/src/pages/resources/ResourcesTabContent.tsx[62-68]
workspaces/dcm/plugins/dcm/src/pages/providers/ProvidersTabContent.tsx[121-152]
workspaces/dcm/plugins/dcm/src/pages/policies/PoliciesTabContent.tsx[139-177]
workspaces/dcm/plugins/dcm/src/pages/catalog-items/CatalogItemsTabContent.tsx[156-187]
workspaces/dcm/plugins/dcm/src/pages/catalog-item-instances/CatalogItemInstancesTabContent.tsx[133-164]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Search changes in cursor-paginated tabs reset cursor/navigation state (`currentTokenRef`, `nextToken`, and/or token stack) without re-fetching, which makes pagination state inconsistent with the currently displayed `data` and can also break back/forward navigation invariants.

## Issue Context
- `usePaginatedFetch.resetCursor()` clears `currentTokenRef` and `nextToken` but does not fetch new data.
- Service Types and Resources call `resetCursor()` in a `useEffect` whenever `search` changes, so typing in the search box can leave the user looking at page N rows while pagination behaves like page 1.
- In cursor-paginated CRUD tabs, `handleSearchChange` clears `currentTokenRef.current` without reloading; since `goNext` pushes `currentTokenRef.current ?? ''` to the token stack and `goPrev` relies on that stack to restore the previous page token, clearing the current token on search can cause Next/Previous to jump to the wrong page (e.g., Previous goes to page 1 rather than the pre-search page).

## Fix Focus Areas
- workspaces/dcm/plugins/dcm/src/hooks/usePaginatedFetch.ts[156-169]
- workspaces/dcm/plugins/dcm/src/pages/service-types/ServiceTypesTabContent.tsx[64-70]
- workspaces/dcm/plugins/dcm/src/pages/resources/ResourcesTabContent.tsx[62-68]
- workspaces/dcm/plugins/dcm/src/pages/providers/ProvidersTabContent.tsx[124-152]
- workspaces/dcm/plugins/dcm/src/pages/policies/PoliciesTabContent.tsx[149-177]
- workspaces/dcm/plugins/dcm/src/pages/catalog-items/CatalogItemsTabContent.tsx[159-187]
- workspaces/dcm/plugins/dcm/src/pages/catalog-item-instances/CatalogItemInstancesTabContent.tsx[136-164]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools